<!--
 * @Descripttion: 
 * @Author: sunchen
 * @Date: 2023-11-02 15:45:07
 * @LastEditors: wangru
 * @LastEditTime: 2023-11-06 14:43:13
-->
<template>
  <div class="NewSelect">
    <a-dropdown @visibleChange="open">
      <a-input
        v-model:value="seletcValue"
        placeholder="请输入/选择"
        maxlength="100"
        @blur="change"
      />
      <template #overlay>
        <a-menu @click="select">
          <a-menu-item v-for="item in selectData" :key="item" :value="item">
            <a href="javascript:;">{{ item }}</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  name: 'EditSelect',
  props: {
    selectData: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      required: false,
    },
  },
  //数据源
  data() {
    return {
      isChange: true,
      seletcValue: '', //选择下拉列表中选项后的值(最终值)
    };
  },
  mounted() {
    this.seletcValue = this.value || '';
  },
  watch: {
    value(newValue) {
      if (newValue !== this.seletcValue) {
        this.seletcValue = newValue;
      }
    },
  },
  methods: {
    open(eve) {
      console.log('>>>>>>>>>>', eve, this.visible);
      this.isChange = eve;
    },
    change(eve) {
      if (this.seletcValue !== '') {
        this.$emit('changeValue', this.seletcValue);
      }
    },
    select(value) {
      this.$emit('changeValue', value.key);
      this.seletcValue = value.key;
    },
    reset() {
      this.seletcValue = null;
    },
  },
};
</script>
<style lang="scss" scoped>
.NewSelect {
  :deep(.ant-input) {
    border: none;
    text-align: center;
  }
}
.ant-input {
  width: 100%;
  text-align: center;
  border: none;
  &:focus {
    box-shadow: none !important;
  }
  .ant-input-focused {
    box-shadow: none !important;
  }
}
</style>
